<template>
  <el-header class="header">
    <div class="header-left">礼租租车 - 服务商后台</div>
    <div class="header-right">
      <span>当前时间：{{ nowTime | formatDate }}</span>
      <span v-if="name" class="name">用户名：{{name}}</span>
      <span v-if="token" class="dropOut" @click="dropOut">[退出]</span>
    </div>
  </el-header>
</template>

<script>
import { format } from 'date-fns'
export default {
  props: ['name'],
  data () {
    return {
      nowTime: '',
      token: false
    }
  },
  created () {
    setInterval(() => {
      this.nowTime = new Date()
    }, 1000)
    this.token = this.$getLocalStorage('sps_token')
  },
  filters: {
    formatDate (time) {
      if (!time) return
      return format(time, 'yyyy-MM-dd HH:mm:ss')
    }
  },
  methods: {
    dropOut () {
      Object.keys(window.localStorage).forEach(item => window.localStorage.removeItem(item))
      this.$router.push({
        path: '/login'
      })
    }
  }
}
</script>

<style scoped lang="scss">
.header{
  height: 60px;
  color: #fff;
  background: #409EFF;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99;

  .header-left {
    float: left;
    font-size: 24px;
    line-height: 60px;
    font-family: SourceHanSansSC;
  }

  .header-right {
    float: right;
    font-size: 14px;
    line-height: 60px;

    .name {
      padding-left: 40px;
    }
    .dropOut {
      padding-left: 10px;
      cursor: pointer;
    }
  }
}
</style>
